<script type="text/x-template" id="cider-charts">
    <div class="content-inner">
        <h1 class="header-text">{{$root.getLz("term.charts")}}</h1>
        <template v-if="songs != []">
            <div class="row">
                <div class="col">
                    <h3>{{ songs.name ?? ""}}</h3>
                </div>
                <div class="col-auto cider-flex-center" v-if="songs.data.length > 12">
                    <button class="cd-btn-seeall"
                            @click="app.showCollection((songs ?? []), songs.name ?? '', 'default')">
                        {{app.getLz('term.seeAll')}}
                    </button>
                </div>
            </div>
            <div class="mediaitem-list-item__grid">
                <listitem-horizontal :items="(songs?.data ?? []).limit(12)">
                </listitem-horizontal>
            </div>
        </template>
        <template v-if="albums != []">
            <div class="row">
                <div class="col">
                    <h3>{{ albums.name ?? ""}}</h3>
                </div>
                <div class="col-auto cider-flex-center" v-if="songs.data.length > 12">
                    <button class="cd-btn-seeall"
                            @click="app.showCollection((albums ?? []), albums.name ?? '', 'default')">
                        {{app.getLz('term.seeAll')}}
                    </button>
                </div>
            </div>
            <mediaitem-scroller-horizontal-large
                    :items="(albums?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
        </template>
        <template v-if="playlists != []">
            <div class="row">
                <div class="col">
                    <h3>{{ playlists.name ?? ""}}</h3>
                </div>
                <div class="col-auto cider-flex-center" v-if="playlists.data.length > 12">
                    <button class="cd-btn-seeall"
                            @click="app.showCollection((playlists ?? []), playlists.name ?? '', 'default')">
                        {{app.getLz('term.seeAll')}}
                    </button>
                </div>
            </div>
            <mediaitem-scroller-horizontal-large
                    :items="(playlists?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
        </template>
        <template v-if="musicvideos != []">
            <div class="row">
                <div class="col">
                    <h3>{{ musicvideos.name ?? ""}}</h3>
                </div>
                <div class="col-auto cider-flex-center" v-if="musicvideos.data.length > 12">
                    <button class="cd-btn-seeall"
                            @click="app.showCollection((musicvideos ?? []), musicvideos.name ?? '', 'default')">
                        {{app.getLz('term.seeAll')}}
                    </button>
                </div>
            </div>
            <mediaitem-scroller-horizontal-large
                    :items="(musicvideos?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
        </template>
        <template v-if="globalcharts != []">
            <div class="row">
                <div class="col">
                    <h3>{{ globalcharts.name ?? ""}}</h3>
                </div>
                <div class="col-auto cider-flex-center" v-if="globalcharts.data.length > 12">
                    <button class="cd-btn-seeall"
                            @click="app.showCollection((globalcharts ?? []), globalcharts.name ?? '', 'default')">
                        {{app.getLz('term.seeAll')}}
                    </button>
                </div>
            </div>
            <mediaitem-scroller-horizontal-large
                    :items="(globalcharts?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
        </template>
        <template v-if="citycharts != []">
            <div class="row">
                <div class="col">
                    <h3>{{ citycharts.name ?? ""}}</h3>
                </div>
                <div class="col-auto cider-flex-center" v-if="citycharts.data.length > 12">
                    <button class="cd-btn-seeall"
                            @click="app.showCollection((citycharts ?? []), citycharts.name ?? '', 'default')">
                        {{app.getLz('term.seeAll')}}
                    </button>
                </div>
            </div>
            <mediaitem-scroller-horizontal-large
                    :items="(citycharts?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
        </template>

    </div>
</script>

<script>
  Vue.component('cider-charts', {
    template: "#cider-charts",
    data: function() {
      return {
        app: this.$root,
        songs: [],
        albums: [],
        playlists: [],
        musicvideos: [],
        citycharts: [],
        globalcharts: [],
        categories: [],
      }
    },
    mounted() {
      this.getData();
    },
    methods: {
      getData() {
        let self = this;
        app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/charts`, {
          types: 'albums,songs,music-videos,playlists',
          l: 'en-gb',
          platform: 'auto',
          limit: '50',
          genre: '34',
          include: 'tracks',
          with: 'cityCharts,dailyGlobalTopCharts',
          extend: 'artistUrl',
          'fields[albums]': 'artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url',
          'fields[playlists]': 'artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,curatorName'
        }).then(res => {
          let page = res.data?.results ?? [];
          self.songs = page.songs[0] ?? [];
          self.albums = page.albums[0] ?? [];
          self.playlists = page.playlists[0] ?? [];
          self.musicvideos = page['music-videos'][0] ?? [];
          self.citycharts = page.cityCharts[0] ?? [];
          self.globalcharts = page.dailyGlobalTopCharts[0] ?? [];
        })
        // let self = this;
        // app.mk.api.music(`/v1/catalog/${app.mk.storefrontId}/charts?types=songs%2Calbums%2Cplaylists&limit=36`).then(res => {
        //     let page = res.data?.results ?? [];
        //     self.songs = page.songs[0] ?? [];
        //     self.albums = page.albums[0] ?? [];
        //     self.playlists = page.playlists[0] ?? [];
        // })
      }
    }
  })
</script>
